<template>
	<!-- 我的积分 -->
	<view>
		<view class="head">
			<image src="/static/list/bg3.png" mode="widthFix"></image>
			<view class="head_main flex justify-between">
				<view class="">
					<view class="text">总积分</view>
					<view class="numbar">{{user.point}}</view>
				</view>
				<view class="commission " @click="handleRule">积分规则</view>
			</view>
		</view>
		<view class="title_recommend flex align-center">
			<view class="vertical"></view>
			<text>积分明细</text>
		</view>
		<view class="tab flex-cb bg-white">
			<text>积分来源</text>
			<text style="margin-left: 10rpx;">积分</text>
			<text>时间</text>
		</view>
		<scroll-view scroll-y="true" class="screen-swiper bg-white" v-if="list.length !==0" @scrolltolower="scrolltolower">
			<view v-for="(item,index) in list" :key="index" class="item flex-cb">
				<text class="name">{{item.title}}</text>
				<text class="numbar">{{item.point}}</text>
				<text class="time">{{item.created_at}}</text>
			</view>
			<view class="flex-c">到底了~</view>
		</scroll-view>
		<nodata v-else />
		<view class="modal_view foot" @click="handleRule()" v-if="isshow">
			<!-- 积分规则 -->
			<view class="text bg-white" v-html="t"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow:0,
				t:'',
				user:'',
				list:[],
				page:1,
				limit:20,
			};
		},
		onLoad() {
			this.$api.point_rule().then(res=>{
				this.t = res.data
			})
			this.$api.user().then(res=>{
				if(res.code == 200001){
					this.user = res.data
				}
			})
			this.getpoint()
		},
		methods:{
			getpoint(){
				this.$api.point_details({
					page:this.page,
					limit:this.limit,
				},1).then(res=>{
					console.log();
					if(res.list.length !==0){
						this.list = [...this.list,...res.list]
					}else{
						if(this.page == 1){
							this.page = 1
						}else{
							this.page --
						}
					}
				})
			},
			handleRule(){
				this.isshow = !this.isshow
			},
			scrolltolower(){
				this.page ++
				this.getpoint()
			}
		}
	}
</script>

<style lang="scss">
.head{
	padding: 10rpx 20rpx 0 20rpx; 
	image{
		width: 710rpx;
		height: 226rpx;
	}
	.head_main{
		width: 710rpx;
		height: 226rpx;
		padding: 0 28rpx;
		position: absolute;
		top: 10rpx;
		left: 20rpx;
		color: #FFF;
		.text{
			font-size: 32rpx;
			margin-bottom: 19rpx;
			margin-top: 54rpx;
		}
		.numbar{
			height: 84rpx;
			line-height: 84rpx;
			font-size: 60rpx;
			margin-bottom: 48rpx;
			font-weight: 400;
		}
		.commission{
			text-align: center;
			font-size: 24rpx;
			margin-top: 24rpx;
			
		}
		
	}
}
.title_recommend{
		margin-left: 36rpx;
		font-size: 32rpx;
		font-weight: bold;
		height: 100rpx;
		.vertical{
			width: 10rpx;
			height: 40rpx;
			background: #1CD699;
			border-radius: 20rpx ;
			margin-right: 15rpx;
		}
	}
.tab{
	height: 78rpx;
	padding: 20rpx 30rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 1rpx;
	text{
		width: 174rpx;
		text-align: center;
	}
}
.screen-swiper{
	height: calc(100vh - 379rpx);
	padding: 0 34rpx 0 23rpx;
	.item:nth-of-type(1){
		margin-top: 39rpx;
	}
	.item{
		font-size: 28rpx;
		padding: 0 10rpx;
		.name{
			width: 174rpx;
		}
		.numbar{
			width: 120rpx;
		}
		.time{
			width: 150rpx;
		}
		text{
			color: #666;
			text-align: center;
			margin-bottom: 45rpx;
		}
	}
}
.foot{
	
	.text{
		padding: 38rpx 26rpx 28rpx 26rpx;
		width: 100%;
		height: calc(100vh - 50rpx);
		position: relative;
		bottom: -50rpx;
		color: #666666;
		line-height: 70rpx;
		font-size: 30rpx;
	}
}
</style>
